
 <template>
  <div class="app">
     <div class="container-left">
      <Aside/> 
     </div>
     <div class="container-right">
      <Header/>
       <Main/>                       
     </div> 
     <Footer/>       
  </div> 

 </template> 

 
 <script setup>
 import Aside from '@/layout/Aside.vue'
 import Header from '@/layout/Header.vue'
 import Main from '@/layout/Main.vue'
 import Footer from '@/layout/Footer.vue'
 </script>

<style>
@import "assets/css/base.css";

.app {
	width: 100%;
	height: 100vh;
	position: fixed;
    display: flex;
}
 /* *{
     margin: 0;
     padding: 0;  
 } */
 /* body{
    width: 100%; 
    height: 100%;
    color: black;
    font-size: 14px; 
 } */
 /* html{
     overflow-x: hidden;
 } */
 /* .container{
     display: flex;
 } */
 .container-left{
     display: flex;
    justify-content: center;
     align-items: center;
     flex-direction: column;
     height: 100%;
     width:200px; 
 }
 .container-right{
     flex: 1;   /* 这是一个缩写，如果有剩余空间，他将占据剩余空间。 */
     padding: 10px;
     overflow-y: hidden;
 } 

  </style> 
 
 
 